<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单输入</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <p>input的输入内容是: {{ iptMsg }}</p>
        <input v-model.number="iptMsg" placeholder="edit me">
        <hr>
        <p>textarea的输入内容是: {{ text }}</p>
        <textarea v-model="text"></textarea>
        <div>
            <p>checkbox的输入内容是: {{ checkboxValue }}</p>
            <input type="checkbox" v-model="checkboxValue" value="A">s 
        </div>
        <div>
            <p>checkbox的输入内容是: {{ state }}</p>
            <input type="checkbox" v-model="state"  true-value="开" false-value="关">
        </div>
        <div>
            <p>多个checkbox的输入内容是: {{ checkboxsValue }}</p>
            <input type="checkbox" v-model="checkboxsValue" value="A" name="xuanze">
            <input type="checkbox" v-model="checkboxsValue" value="B" name="xuanze">
            <input type="checkbox" v-model="checkboxsValue" value="C" name="xuanze">
        </div>
        
        <div>
            <p>radio的输入内容是: {{ radioValue }}</p>
            <input type="radio" v-model="radioValue" value="A" name="danxuan">
            <input type="radio" v-model="radioValue" value="B" name="danxuan">
        </div>
        <div>
            <p>select输入内容: {{ selected }}</p>
            <select v-model="selected">
                <option disabled value="">请选择</option>
                <option value="a">A</option>
                <option>B</option>
                <option>C</option>
            </select>
        </div>
        <h2>用户数据显示</h2>
        <form action="">
            <div>
                <label for="username">姓名：</label>
                <input type="text" v-model="user.name" id="username">
            </div>
            <div>
                <label for="gender">性别：</label>
                <label for="male">男
                    <input type="radio" v-model.number="user.gender" id="male" name="gender" value="0">
                </label>
                <label for="female">女
                    <input type="radio" v-model.number="user.gender" id="female" name="gender" value="1">
                </label>   
            </div>
            <div>
                <label for="permission">权限：</label>
                <label for="login" >登录
                    <input type="checkbox" id="login" value="0" v-model.number="user.permission">
                </label>
                <label for="post">发帖
                    <input type="checkbox" id="post" value="1" v-model.number="user.permission">
                </label>
                <label for="update">修改帖子
                    <input type="checkbox" id="update" value="2" v-model.number="user.permission">
                </label>
                <label for="update-o">修改他人帖子
                    <input type="checkbox" id="update-o" value="3" v-model.number="user.permission">
                </label>
            </div>
            <div>
                <label for="detail">详细介绍：</label>
                <textarea  id="detail" cols="30" rows="10" v-model="user.detail"></textarea>
            </div>
            <div>
                <label for="state">状态</label>
                <select v-model.number="user.state">
                    <option value="0">正常</option>
                    <option value="1">禁用</option>
                    <option value="2">注销</option>
                </select>
            </div>
            <div>
                <label for="">管理员</label>
            
                <input type="checkbox" v-model.number="user.isAdmin">
            </div>
        </form>

    </div>
    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                iptMsg: 'abc',
                text: 'textarea初始值',
                checkboxValue: true,
                checkboxsValue: [],
                radioValue: '',
                selected:'',
                state:'开',
                user:{
                    name:'李俊杰', //text
                    gender:0,//radio
                    permission:[0,1,2],// checkbox 0登录，1发帖，2修改帖子，3修改他人帖子
                    detail:'详细内容多行文本',//textarea
                    state:0,//0正常，1禁用，2注销， // select
                    isAdmin:true,//是否管理员 // checkbox
                }
            },
            methods: {

            }
        })
    </script>

</body>

</html>